<template>
  <div>
    <Anchor :labelList="labels" :labelWidth="100">
      <div id="row-1" class="line">
        <BreakSpace label="项目列表" :containerStyle="{ marginBottom: '10px' }"></BreakSpace>
        <FilterTable
          ref="table"
          height="auto"
          columnsRef="decorationDispatchOrderSelectRefwww"
          :columns="projectColumns"
          :isSelectColumn="false"
          selectionType="single"
          :fetchapi="projectFetchApi"
          :params="projectFetchParams"
          :datakey="'rows'"
          :onColumnsChange="columns => (this.columns = columns)"
        >
        </FilterTable>
      </div>
      <div id="row-2" class="line">
        <BreakSpace label="装饰件列表" :containerStyle="{ marginBottom: '10px' }"></BreakSpace>
        <FilterTable
          ref="table"
          height="auto"
          columnsRef="decorationDispatchOrderSelectRefwwws"
          :columns="partColumns"
          :isSelectColumn="false"
          selectionType="single"
          :fetchapi="partFetchApi"
          :params="partFetchParams"
          :datakey="'rows'"
          :onColumnsChange="columns => (this.columns = columns)"
        >
        </FilterTable>
      </div>
      <div id="row-3" class="line">
        <BreakSpace label="装饰派工单" :containerStyle="{ marginBottom: '10px' }"></BreakSpace>
        <FilterTable
          ref="table"
          height="auto"
          columnsRef="decorationDispatchOrderSelectRefwwwb"
          :columns="orderColumns"
          :isSelectColumn="false"
          selectionType="single"
          :fetchapi="orderFetchApi"
          :params="orderFetchParams"
          :datakey="'rows'"
          :onColumnsChange="columns => (this.columns = columns)"
        >
        </FilterTable>
      </div>
    </Anchor>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9999,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button @click="closeDialog">关 闭</el-button>
      <!-- <el-button type="primary" @click="confirmHandle">保 存</el-button> -->
    </div>
    <!-- <BreakSpace label="项目列表" :containerStyle="{ marginTop: '10px', marginBottom: '10px' }"></BreakSpace>

    <BreakSpace label="装饰件列表" :containerStyle="{ marginTop: '10px', marginBottom: '10px' }"></BreakSpace> -->
  </div>
</template>
<script>
import { projectList, orderList, partList } from '@/api/part/qualityManagement/report/inquiryForDecorationOrders';
import { dictionary } from '@/utils/dictMixin';
import { authority } from '@/utils/authMixin';
export default {
  name: 'Detail',
  mixins: [dictionary, authority],
  props: ['queryParams'],
  data() {
    return {
      labels: [
        { title: '项目列表', id: 'row-1' },
        { title: '装饰件列表', id: 'row-2' },
        { title: '装饰派工单', id: 'row-3' }
      ],
      projectColumns: this.createProjectColumns(), // 项目明细table
      projectFetchApi: projectList, // 项目明细接口
      projectFetchParams: { xhrAbort: false, billNo: this.queryParams.billNo },
      partColumns: this.createPartColumns(), // 装饰件明细table
      partFetchApi: partList, // 装饰件明细接口
      partFetchParams: { xhrAbort: false, billNo: this.queryParams.billNo },
      orderColumns: this.createOrderColumns(), // 派工单明细table
      orderFetchApi: orderList, // 派工单明细接口
      orderFetchParams: { xhrAbort: false, billNo: this.queryParams.billNo }
    };
  },
  methods: {
    // 关闭按钮
    closeDialog() {
      this.$emit('closeDialog');
    },
    // 派工单table
    createOrderColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 90,
          fixed: 'left',
          sorter: true,
          render: props => {
            return <span>{props.row.$index + 1}</span>;
          }
        },
        {
          title: '装饰派工单号',
          dataIndex: 'billNo',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '客户名称',
          dataIndex: 'customerName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '牌照号',
          dataIndex: 'licenseTag',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '派工日期',
          dataIndex: 'orderDate',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '工时费',
          dataIndex: 'proFee',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '材料费',
          dataIndex: 'receiveableBoutiquePartFee',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '优惠金额',
          dataIndex: 'discountedPrice',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '费用合计',
          dataIndex: 'realBoutiqueItemFee',
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    },
    // 装饰件table
    createPartColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 90,
          fixed: 'left',
          sorter: true,
          render: props => {
            return <span>{props.row.$index + 1}</span>;
          }
        },
        {
          title: '装饰派工单号',
          dataIndex: 'billNo',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '装饰件代码',
          dataIndex: 'partNo',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '装饰件名称',
          dataIndex: 'partName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '批号',
          dataIndex: 'a1',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '出库方式',
          dataIndex: 'outType',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('8096'),
          render: props => {
            return <span>{this.createDictText(props.row.outType, '8096')}</span>;
          }
        },
        {
          title: '出库数量',
          dataIndex: 'partQuantity',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '出库单价',
          dataIndex: 'partSalesPrice',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '出库金额',
          dataIndex: 'outAmount',
          sorter: true,
          filter: true,
          filterType: 'input',
          precision: 2,
          summation: true
        },
        {
          title: '优惠率(%)',
          dataIndex: 'discountRate',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '优惠后材料费',
          dataIndex: 'proFeeAfterDiscount',
          sorter: true,
          filter: true,
          filterType: 'input',
          precision: 2,
          summation: true
        },
        {
          title: '供应商代码',
          dataIndex: 'customerCode',
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    },
    // 项目table
    createProjectColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 90,
          fixed: 'left',
          sorter: true,
          render: props => {
            return <span>{props.row.$index + 1}</span>;
          }
        },
        {
          title: '装饰派工单号',
          dataIndex: 'billNo',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '项目代码',
          dataIndex: 'proCode',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '项目名称',
          dataIndex: 'proName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '班组代码',
          dataIndex: 'bzCode',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '班组名称',
          dataIndex: 'bzName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '工时费',
          dataIndex: 'proFee',
          sorter: true,
          filter: true,
          filterType: 'input',
          precision: 2,
          summation: true
        },
        {
          title: '优惠率(%)',
          dataIndex: 'discountRate',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '优惠后工时费',
          dataIndex: 'proFeeAfterDiscount',
          sorter: true,
          filter: true,
          filterType: 'input',
          precision: 2,
          summation: true
        }
      ];
    }
  }
};
</script>
